דלג לתוכן הראשי

העברת מידע מה-template

הפעלת אירוע מתוך ה-template​

כדי להעביר מידע מה-class ל-template אנחנו משתמשים ב-properties. משתנים שמוגדרים ב-class וזמינים לנו לשימוש ב-template.

מה קורה כשרוצים להעביר מידע בכיוון ההפוך, מה-template ל-class? משתמשים באירועים.

טריגר של אירוע מתוך התבנית:

קוראים לאירוע ה-click שמפעיל את הפונקציה onClick שנמצאת ב-class.

html file
<button (click)="onClick()"></button>

בקובץ ה-class אפשר לבצע פעולות בתוך הפונקציה.

ts file
onClick(){
    console.log('Button Check');
}

קבלת מידע עם האירוע​

אם רוצים גם מידע שיעבור מקובץ ה-html נשלח את האירוע ביחד עם הפונקציה.

html file
<button (click)="onClick($event)"></button>

את הערך נקבל ב-class ונוכל להשתמש בו:

ts file
onClick(event: Event){
    console.log('Button Check', event);
}

שימוש ישיר לפעולה קצרה​

אפשר לבצע פעולה בתוך הקריאה לאירוע במקום לקרוא לפונקציה ב-class:

html file
<button (click)="propName = 'Some String'"></button>

אפשר גם להעביר ערכים שונים מתוך קובץ ה-html כמו האובייקט שממנו קוראים לפונ' או id של מי שקורא לפונ':

html file
<input #myInput type="text">
<button (click)="funcName(myInput.value)">Pass The value</button>

הפונ' תקבל את הערך שנשלח אליה ב-class:

ts file
funcName(value){  

}

Two way binding​

אפשר לחבר ישירות בין המשתנה של האירוע למשתנה שמוגדר בתוך ה-class.

בשביל זה קודם נייבא את מודל הטפסים:

app.module.ts
import { FormsModule } from '@angular/forms'

// In the import array:
imports: [
    …
    FormsModule
]

בקובץ ה-class נגדיר את המשתנה:

ts file
public name: string ='';

בקובץ ה-html נחבר את המשתנה:

html file
<input [(ngModel)]="name" type="text">{{ name }}

רשימה של אירועים באנגולר​

ts file
// Full list of Angular Events
(click)="myFunction()"      
(dblclick)="myFunction()"   
(submit)="myFunction()"
(blur)="myFunction()"  
(focus)="myFunction()" 
(scroll)="myFunction()"
(input)="myFunction()"
(keyup)="myFunction()"
(keydown)="myFunction()"
(mousedown)="myFunction()"
(drag)="myFunction()"
(drop)="myFunction()"

שימוש בחיבור של שני אירועים​

html file
<input type="text" #iterName>
<button (click)="onAddItem($event); iterValue=iterName.value"></button>

שימוש באירוע click​

html file
<div class="form-group">
 <label for="exampleInputEmail1">User name</label>
 <input class="form-control" [(ngModel)]="name" 
    name="name" #nameCtrl="ngModel">
   <button class="btn btn-success" (click)="clickEvent($event, nameCtrl.value)">
        Submit
   </button>
</div>
ts file
....
export class AppComponent {
  name = '';

  clickEvent(event: Event, name: string) {
    console.log('Input name value: ' + name)
    console.log(event);
    debugger
  }
}

שימוש באירוע change בבחירת select​

html file
<div class="form-group">
  <label>Select favouritcountry</label>
  <select (change)="selectedCountry($event)" class="form-control">
    <option value="india" selected="selected">India</option>
    <option value="france">France</option>
    <option value="germany">Germany</option>
    <option value="canada">Canada</option>
  </select>
</div>
ts file
selectedCountry(event: any) {
  console.log(event.target.value);
}

שימוש באירוע key​

html file
<div class="container">
  <input (keyup)="onKeyUp($event)" />
  <p>Value of inputData : {{ inputData }}</p>
</div>
ts file
export class AppComponent {
  inputData: string = '';

  onKeyUp(event: any) {
    this.inputData = event.target.value;
  }
}